<template>
    <view class="mine-view">
        <view class="tabBar-content">
            <view class="tabBar-item" :class="{ 'tabBar-active': tabBarActive == 1 }" @click="onTabBar(1)">我的项目</view>
            <view class="tabBar-item" :class="{ 'tabBar-active': tabBarActive == 2 }" @click="onTabBar(2)">我的预约</view>
        </view>
        <view class="form-view">
            <view class="project-view" v-for="(i, index) in 3" :key="index">
                <view class="project-item">
                    <PCMineProjectItem></PCMineProjectItem>
                </view>
            </view>
            <view class="pagination-button">
                <view class="button-item">
                    <i class="el-icon-arrow-left"></i>
                </view>
                <view class="button-item">
                    <i class="el-icon-arrow-right"></i>
                </view>
                <view class="button-item-end">2/10 </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabBarActive: 1
        };
    },
    methods: {
        onTabBar(event) {
            this.tabBarActive = event
        },
    },
};
</script>

<style scoped lang="scss">
.mine-view {
    width: 100%;
    background: white;
    padding: 48px 40px 36px 40px;
    min-height: 610px;

    .tabBar-content {
        @extend .row-start;

        .tabBar-item {
            transition: all 0.3s;
            font-weight: 400;
            font-size: 18px;
            color: #2C1101;
            line-height: 25px;
            font-style: normal;
        }

        .tabBar-item+.tabBar-item {
            margin-left: 32px;
        }

        .tabBar-active {
            font-weight: 600;
            font-size: 20px;
            color: #2C1101;
            line-height: 28px;
            font-style: normal;
            position: relative;
            @extend .row;

            &::after {
                content: "";
                position: absolute;
                bottom: -4px;
                width: 20px;
                height: 4px;
                background: #FF453B;
            }

        }
    }

    .form-view {
        display: grid;
        grid-template-rows: 1fr auto;
        /* 使用网格行实现上下布局 */
        min-height: 610px;

        .project-view {
            width: 100%;
            margin-top: 20px;

            .project-item {
                width: 605px;
                height: 207px;
            }

            .project-item+.project-item {
                margin-top: 29px;
            }
        }

        .pagination-button {
            margin-top: 20px;
            @extend .row-start;

            .button-item {
                width: 40px;
                height: 40px;
                border: 1px solid #e8ded6;
                @extend .column;
            }

            .button-item-end {
                margin-left: 10px;
                @extend .row;
                width: 63px;
                height: 40px;
                border-radius: 4px;
                border: 1px solid #e8ded6;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #2c1101;
                line-height: 22px;
                text-align: left;
                font-style: normal;
            }

            .button-item+.button-item {
                margin-left: 10px;
            }
        }
    }
}
</style>